<template>
  <div class="margin-box">
    <v-dialog title="新增消息" :show.sync="dialogVisible" @beforeClose="beforeClose" width="1000px">
      <div class="card-box">
        <el-form ref="messageDetails" label-position="top" :model="messageAdd.sysInfo" class="form-wrap" size="small" :rules="rules">
          <el-form-item label="消息类型" prop="messageType">
            <el-select v-model="messageAdd.sysInfo.messageType" placeholder="请选择">
              <el-option v-for="item in messageTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择接收人">
            <el-button type="primary" @click="xzlxr()">点击选择接收人</el-button>
            <p v-if="messageAdd.userIdList.length!=null && messageAdd.userIdList.length>0">{{"当前选择人数:"+messageAdd.userIdList.length}}</p>
            <div style="width: 950px;overflow: hidden">{{keys}}</div>

            <SelectUsers ref="SelectUsers" v-on:CheckedKeys="Userload"></SelectUsers>
          </el-form-item>
          <el-form-item label="消息标题" prop="messageHeader">
            <el-input v-model.trim="messageAdd.sysInfo.messageHeader" maxlength="120" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="消息内容" prop="msgContent">
            <el-input type="textarea" v-model.trim="messageAdd.sysInfo.msgContent"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="foot">
        <el-button @click="handleCancel" class="receiver">取 消</el-button>
        <el-button v-throttle="[handleCommit]">提 交</el-button>
      </span>
    </v-dialog>
  </div>
</template>

<script>
import { getDict } from '~/utils'
import { getDeptInfo, getUserInfoByUserName } from "~/views/message-center/message-list/api/message";
import SelectUsers from "./SelectUsers";
export default {
  name: "message-sending",
  data () {
    return {
      dialogVisible: false,
      messageAdd: {
        deptList: [],
        sysInfo: {
          messageType: '',
          messageHeader: '',
          msgContent: ''
        },
        userIdList: []
      },
      deptList: [],
      userIdList: [],
      messageTypes: [],
      rules: {
        messageType: [{ required: true, message: '请选择消息类型', trigger: 'blur' }],
        messageHeader: [{ required: true, message: '请输入消息标题', trigger: 'blur' }],
        msgContent: [{ required: true, message: '请输入消息内容', trigger: 'blur' }]
      },
      keys: '', // 显示 选择了哪些人
    }
  },
  methods: {
    beforeClose (done) {
      done()
      this.handleCancel()
    },
    handleCancel () {
      this.keys = '',
        this.dialogVisible = false
      this.messageAdd.sysInfo = {}
      this.messageAdd.deptList = []
      this.messageAdd.userIdList = []
    },
    handleCommit () {
      this.$refs.messageDetails.validate((valid) => {
        if (valid) {
          if (this.messageAdd.deptList.length < 1 && this.messageAdd.userIdList.length < 1) {
            this.$message.error('接收人不能为空！')
            return;
          }
          let rdata = Object.assign({}, this.messageAdd)
          this.$emit('sendMessage', rdata)
          this.handleCancel()
        }
      })
    },
    xzlxr () {
      this.$refs.SelectUsers.show();
    },
    Userload (CheckedKeys) {
      this.messageAdd.userIdList = CheckedKeys.list;
      this.keys = CheckedKeys.keys;
    },
    show () {
      this.dialogVisible = true
    },
    handleGetDeptInfo () {
      this.deptName = this.messageAdd.deptList
      this.realName = this.messageAdd.userIdList
      getDeptInfo(this.deptName).then(res => {
        if (res.data.code === 0) {
          this.deptList = res.data.data.filter(it => it.deptId === 39)
        }
      })
      getUserInfoByUserName(this.realName).then(res => {
        if (res.data.code === 0) {
          this.userIdList = res.data.data
        }
      })
    }
  },
  components: {
    SelectUsers
  },
  mounted () {
    this.messageTypes = getDict('message_type')
    this.handleGetDeptInfo()
  }
}
</script>

<style scoped lang="scss">
.margin-box {
  position: relative;
  .receiver {
    ::after {
      content: "*";
      position: absolute;
      top: 173px;
      left: 24px;
      display: inline-block;
      margin-right: 10px;
      color: #f57272;
    }
  }
}
</style>
